<script setup>
import { onBeforeMount, ref, getCurrentInstance, watch, onUpdated } from 'vue'
import useCookieStore from '@/stores/cookieStorage.js'
import { useCounterStore } from '@/stores/counter.js'
const counterStore = useCounterStore()
let cookieStore = useCookieStore()

let hiddenAdvertise = ref(false)
let hidFooter = ref(false)
onUpdated(_ => {
    hiddenAdvertise.value = cookieStore.hiddenAdvertise
})

let advertiseArray = ref([]);

watch(hiddenAdvertise, (n, o) => {

})
onBeforeMount(() => {
    // console.log('hiddenAdvertise:',hiddenAdvertise)
    // debugger
    const worker = new Worker("/worker/test.js")
    worker.postMessage({ type: "广告" })

    worker.onmessage = function (e) {
        advertiseArray.value = e.data
        this.terminate();
    }
})
function go1() {

}
function go2() {

}
function goTop() {
    window.scrollTo(window.scrollX, 0)
    counterStore.toTop = false
}
function hiddenFoot(){
    hidFooter.value=true
}
</script>
<template>
    <aside class="right-container pointer">
        <a class="zixun" href="http://www.baidu.com">
            课程咨询
        </a>

        <a class="zixun" v-if="counterStore.toTop" @click="goTop">返回顶部</a>
    </aside>
    <footer class="advertisement-footer pointer" @click="go2" v-if="advertiseArray.length && advertiseArray[0].img&&!hidFooter">
        <div>
            <span @click="hiddenFoot">×</span>
            <img :src="advertiseArray.length && advertiseArray[0].img" alt="" srcset="">
        </div>
    </footer>
</template>
<style scoped lang="scss">
.right-container.pointer {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    .zixun {
        -webkit-text-size-adjust: 100%;
        word-wrap: break-word;
        font: 12px/1.5 arial, \5B8B\4F53, sans-serif;
        font-family: 'microsoft yahei';
        cursor: pointer;
        outline: 0 none;
        text-decoration: none;
        background: #be0f34;
        display: block;
        position: relative;
        margin-bottom: 2px;
        width: 50px;
        height: 66px;
        padding: 10px;
    }
}

.advertisement-footer.pointer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70px;
    overflow: hidden;
    z-index: 999;

    div {
        height: inherit;
        position: relative;

        img {
            height: inherit;
            width: 100%;
        }

        span {
            color: white;
            position: absolute;
       
            font-size: 30px;
            top: 0;
            right: 0;
        }
    }


}
</style>